<template>
  <template v-for="item in routeResult" :key="item.path">
    <template v-if="!item.meta?.hide">
      <el-menu-item v-if="!item.children || item.children.length === 0" :index="item.path">
        <el-icon><component :is="item.icon"></component></el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
      <el-sub-menu :index="item.path" v-else>
        <template #title>
          <el-icon><component :is="item.icon"></component></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <MenuCom :routes="item.children"></MenuCom>
        <!-- <el-menu-item
          v-for="childRoute in item.children"
          :key="childRoute.path"
          :index="childRoute.path"
        >
          <span>{{ childRoute.name }}</span>
        </el-menu-item> -->
      </el-sub-menu>
    </template>
  </template>
</template>

<script setup lang="ts">
import type { RouteItem } from '@/router/index';
const { routes } = defineProps(['routes'])
const authCodes = localStorage.getItem('authCodes')?.split(',')
console.log(authCodes)
const routeResult = routes.filter((item: RouteItem) => authCodes?.includes(item.meta?.code+''))
</script>

<style></style>
